<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吉运行为 - 行为风水学应用</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .prototype-container {
            display: flex;
            flex-direction: column;
            gap: 50px;
            padding-bottom: 50px;
        }
        
        .prototype {
            background-color: white;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 375px;
            height: 812px;
            position: relative;
            margin: 0 auto;
        }
        
        .prototype-title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
            font-weight: bold;
        }
        
        .status-bar {
            height: 44px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            font-size: 14px;
            color: #000;
            border-bottom: 1px solid #eee;
        }
        
        .header {
            height: 56px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            background-color: #fff;
            border-bottom: 1px solid #eee;
        }
        
        .header-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .back-button {
            position: absolute;
            left: 16px;
            font-size: 20px;
        }
        
        .content {
            height: calc(100% - 100px);
            overflow-y: auto;
            padding: 16px;
        }
        
        .bottom-nav {
            height: 56px;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            bottom: 0;
            width: 100%;
            border-top: 1px solid #eee;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #999;
        }
        
        .nav-item.active {
            color: #ff6b6b;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #ff5252;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid #ff6b6b;
            color: #ff6b6b;
        }
        
        .btn-outline:hover {
            background-color: rgba(255, 107, 107, 0.1);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            font-size: 14px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        
        .form-select {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            background-color: white;
        }
        
        .card {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
            color: #333;
        }
        
        .welcome-logo {
            text-align: center;
            margin: 40px 0;
        }
        
        .welcome-logo i {
            font-size: 80px;
            color: #ff6b6b;
        }
        
        .welcome-title {
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 16px;
            color: #333;
        }
        
        .welcome-subtitle {
            font-size: 16px;
            text-align: center;
            margin-bottom: 40px;
            color: #666;
        }
        
        .divider {
            display: flex;
            align-items: center;
            margin: 24px 0;
            color: #999;
            font-size: 14px;
        }
        
        .divider::before,
        .divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background-color: #eee;
        }
        
        .divider::before {
            margin-right: 16px;
        }
        
        .divider::after {
            margin-left: 16px;
        }
        
        .social-login {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-top: 24px;
        }
        
        .social-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #333;
        }
        
        .date-picker {
            display: flex;
            gap: 8px;
        }
        
        .date-picker select {
            flex: 1;
            padding: 12px 8px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .radio-group {
            display: flex;
            gap: 16px;
        }
        
        .radio-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .chart-container {
            margin: 20px 0;
            text-align: center;
        }
        
        .chart-circle {
            width: 240px;
            height: 240px;
            border-radius: 50%;
            margin: 0 auto;
            position: relative;
            background: radial-gradient(circle, #fff6f6, #ffe6e6);
            border: 2px solid #ffcece;
        }
        
        .chart-element {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ff6b6b;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
        }
        
        .element-1 { top: 20px; left: 100px; background-color: #ff6b6b; }
        .element-2 { top: 100px; right: 20px; background-color: #ffb347; }
        .element-3 { bottom: 20px; right: 100px; background-color: #a5d6a7; }
        .element-4 { bottom: 100px; left: 20px; background-color: #90caf9; }
        .element-5 { top: 100px; left: 100px; background-color: #ce93d8; }
        
        .chart-line {
            position: absolute;
            height: 2px;
            background-color: rgba(0, 0, 0, 0.1);
            transform-origin: center;
        }
        
        .fortune-stats {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
        }
        
        .fortune-stat {
            text-align: center;
            flex: 1;
        }
        
        .fortune-value {
            font-size: 24px;
            font-weight: bold;
            color: #ff6b6b;
        }
        
        .fortune-label {
            font-size: 12px;
            color: #666;
        }
        
        .tag {
            display: inline-block;
            padding: 4px 12px;
            background-color: #f5f5f5;
            border-radius: 16px;
            font-size: 12px;
            margin-right: 8px;
            margin-bottom: 8px;
            color: #666;
        }
        
        .tag.highlight {
            background-color: #ffe6e6;
            color: #ff6b6b;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 style="text-align: center; margin: 40px 0;">吉运行为 - 行为风水学应用原型</h1>
        
        <div class="prototype-container">
            <!-- 欢迎/登录页面 -->
            <div>
                <h2 class="prototype-title">1. 欢迎/登录页面</h2>
                <div class="prototype">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-full"></i>
                        </span>
                    </div>
                    <div class="content" style="padding-top: 60px;">
                        <div class="welcome-logo">
                            <i class="fas fa-yin-yang"></i>
                        </div>
                        <h1 class="welcome-title">吉运行为</h1>
                        <p class="welcome-subtitle">行为改变命运，智慧指引人生</p>
                        
                        <div style="padding: 0 20px;">
                            <div class="form-group">
                                <input type="text" class="form-input" placeholder="手机号码">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-input" placeholder="密码">
                            </div>
                            <div class="form-group">
                                <button class="btn">登录</button>
                            </div>
                            <div style="text-align: center; margin: 16px 0;">
                                <a href="#" style="color: #666; text-decoration: none; font-size: 14px;">忘记密码？</a>
                            </div>
                            
                            <div class="divider">或</div>
                            
                            <div class="form-group">
                                <button class="btn btn-outline">注册新账号</button>
                            </div>
                            
                            <div class="social-login">
                                <div class="social-icon">
                                    <i class="fab fa-weixin" style="color: #07C160;"></i>
                                </div>
                                <div class="social-icon">
                                    <i class="fab fa-qq" style="color: #12B7F5;"></i>
                                </div>
                                <div class="social-icon">
                                    <i class="fab fa-weibo" style="color: #E6162D;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 用户信息录入页面 -->
            <div>
                <h2 class="prototype-title">2. 用户信息录入页面</h2>
                <div class="prototype">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-full"></i>
                        </span>
                    </div>
                    <div class="header">
                        <div class="back-button">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="header-title">完善个人信息</div>
                    </div>
                    <div class="content">
                        <div style="padding: 10px 0;">
                            <p style="text-align: center; margin-bottom: 20px; color: #666;">请填写真实信息，以获取准确的命理分析</p>
                            
                            <div class="form-group">
                                <label class="form-label">姓名</label>
                                <input type="text" class="form-input" placeholder="请输入您的真实姓名">
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">性别</label>
                                <div class="radio-group">
                                    <div class="radio-item">
                                        <input type="radio" id="male" name="gender" checked>
                                        <label for="male">男</label>
                                    </div>
                                    <div class="radio-item">
                                        <input type="radio" id="female" name="gender">
                                        <label for="female">女</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">出生日期（农历）</label>
                                <div class="date-picker">
                                    <select class="form-select">
                                        <option>1980年</option>
                                        <option>1981年</option>
                                        <option>1982年</option>
                                        <option selected>1983年</option>
                                        <option>1984年</option>
                                        <option>1985年</option>
                                    </select>
                                    <select class="form-select">
                                        <option>正月</option>
                                        <option>二月</option>
                                        <option selected>三月</option>
                                        <option>四月</option>
                                        <option>五月</option>
                                    </select>
                                    <select class="form-select">
                                        <option>初一</option>
                                        <option>初二</option>
                                        <option>初三</option>
                                        <option selected>初四</option>
                                        <option>初五</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">出生时辰</label>
                                <select class="form-select">
                                    <option>子时 (23:00-01:00)</option>
                                    <option>丑时 (01:00-03:00)</option>
                                    <option>寅时 (03:00-05:00)</option>
                                    <option>卯时 (05:00-07:00)</option>
                                    <option selected>辰时 (07:00-09:00)</option>
                                    <option>巳时 (09:00-11:00)</option>
                                    <option>午时 (11:00-13:00)</option>
                                    <option>未时 (13:00-15:00)</option>
                                    <option>申时 (15:00-17:00)</option>
                                    <option>酉时 (17:00-19:00)</option>
                                    <option>戌时 (19:00-21:00)</option>
                                    <option>亥时 (21:00-23:00)</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">出生地</label>
                                <div style="display: flex; gap: 8px;">
                                    <select class="form-select">
                                        <option selected>北京市</option>
                                        <option>上海市</option>
                                        <option>广东省</option>
                                        <option>江苏省</option>
                                    </select>
                                    <select class="form-select">
                                        <option selected>北京市</option>
                                        <option>朝阳区</option>
                                        <option>海淀区</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">职业</label>
                                <select class="form-select">
                                    <option>学生</option>
                                    <option selected>企业职员</option>
                                    <option>自由职业</option>
                                    <option>公务员</option>
                                    <option>教师</option>
                                    <option>医生</option>
                                    <option>工程师</option>
                                    <option>其他</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label class="form-label">婚姻状况</label>
                                <select class="form-select">
                                    <option>未婚</option>
                                    <option selected>已婚</option>
                                    <option>离异</option>
                                    <option>丧偶</option>
                                </select>
                            </div>
                            
                            <div class="form-group" style="margin-top: 30px;">
                                <button class="btn">生成我的命理基本盘</button>
                            </div>
                            
                            <p style="text-align: center; margin-top: 16px; font-size: 12px; color: #999;">
                                点击上方按钮，即表示您同意我们的<a href="#" style="color: #ff6b6b;">用户协议</a>和<a href="#" style="color: #ff6b6b;">隐私政策</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 基本盘展示页面 -->
            <div>
                <h2 class="prototype-title">3. 基本盘展示页面</h2>
                <div class="prototype">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-full"></i>
                        </span>
                    </div>
                    <div class="header">
                        <div class="back-button">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="header-title">命理基本盘</div>
                    </div>
                    <div class="content">
                        <div class="card">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <div>
                                    <h3 style="font-size: 20px; margin-bottom: 4px;">张先生的命理基本盘</h3>
                                    <p style="color: #666; font-size: 14px;">癸亥年 癸卯月 甲辰日 辰时</p>
                                </div>
                                <button style="background: none; border: none; color: #ff6b6b;">
                                    <i class="fas fa-share-alt"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="chart-container">
                            <div class="chart-circle">
                                <div class="chart-element element-1">金</div>
                                <div class="chart-element element-2">木</div>
                                <div class="chart-element element-3">水</div>
                                <div class="chart-element element-4">火</div>
                                <div class="chart-element element-5">土</div>
                                
                                <div class="chart-line" style="width: 200px; top: 120px; left: 20px; transform: rotate(0deg);"></div>
                                <div class="chart-line" style="width: 200px; top: 120px; left: 20px; transform: rotate(72deg);"></div>
                                <div class="chart-line" style="width: 200px; top: 120px; left: 20px; transform: rotate(144deg);"></div>
                                <div class="chart-line" style="width: 200px; top: 120px; left: 20px; transform: rotate(216deg);"></div>
                                <div class="chart-line" style="width: 200px; top: 120px; left: 20px; transform: rotate(288deg);"></div>
                            </div>
                        </div>
                        
                        <div class="fortune-stats">
                            <div class="fortune-stat">
                                <div class="fortune-value">73</div>
                                <div class="fortune-label">财运</div>
                            </div>
                            <div class="fortune-stat">
                                <div class="fortune-value">85</div>
                                <div class="fortune-label">事业</div>
                            </div>
                            <div class="fortune-stat">
                                <div class="fortune-value">68</div>
                                <div class="fortune-label">健康</div>
                            </div>
                            <div class="fortune-stat">
                                <div class="fortune-value">79</div>
                                <div class="fortune-label">人际</div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <h3 class="card-title">五行分析</h3>
                            <p style="margin-bottom: 16px; font-size: 14px; color: #333;">您的八字中，<span style="color: #ff6b6b; font-weight: bold;">金水较旺，木火较弱</span>，土居中。日主天干为甲木，处于被抑制状态。</p>
                            <div>
                                <span class="tag highlight">金: 旺</span>
                                <span class="tag highlight">水: 旺</span>
                                <span class="tag">土: 平</span>
                                <span class="tag">木: 弱</span>
                                <span class="tag">火: 弱</span>
                            </div>
                        </div>
                        
                        <div class="card">
                            <h3 class="card-title">性格特点</h3>
                            <p style="font-size: 14px; color: #333; line-height: 1.8;">
                                您性格稳重踏实，做事有条理，善于规划。金水旺盛使您思维敏捷，善于沟通，但有时过于理性，缺乏感性思考。木火偏弱导致创造力和决断力有待提升，建议多参与创新活动，锻炼决策能力。
                            </p>
                        </div>
                        
                        <div class="card">
                            <h3 class="card-title">事业发展</h3>
                            <p style="font-size: 14px; color: #333; line-height: 1.8;">
                                适合从事金融、管理、咨询、教育等行业。事业运势在2023-2025年处于上升期，2023年下半年有贵人相助机会。建议稳扎稳打，不要急于求成，积累专业知识和人脉资源。
                            </p>
                        </div>
                        
                        <div style="margin: 30px 0; text-align: center;">
                            <button class="btn" style="max-width: 240px;">开始提升运势之旅</button>
                            <p style="margin-top: 12px; font-size: 12px; color: #999;">
                                <i class="fas fa-lock"></i> 更详细的分析需要开通会员
                            </p>
                        </div>
                    </div>
                    
                    <div class="bottom-nav">
                        <div class="nav-item">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </div>
                        <div class="nav-item active">
                            <i class="fas fa-chart-pie"></i>
                            <span>命盘</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-book"></i>
                            <span>抄经</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-compass"></i>
                            <span>指引</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 抄经书功能页面 -->
            <div>
                <h2 class="prototype-title">4. 抄经书功能页面</h2>
                <div class="prototype">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-full"></i>
                        </span>
                    </div>
                    <div class="header">
                        <div class="back-button">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="header-title">抄经修行</div>
                    </div>
                    <div class="content">
                        <div class="card" style="margin-bottom: 20px;">
                            <div style="display: flex; align-items: center; margin-bottom: 16px;">
                                <div style="width: 60px; height: 60px; border-radius: 50%; background-color: #ffe6e6; display: flex; justify-content: center; align-items: center; margin-right: 16px;">
                                    <i class="fas fa-book" style="font-size: 24px; color: #ff6b6b;"></i>
                                </div>
                                <div>
                                    <h3 style="font-size: 18px; margin-bottom: 4px;">今日抄经</h3>
                                    <p style="color: #666; font-size: 14px;">连续抄经 7 天，当前运势提升 15%</p>
                                </div>
                            </div>
                            <div style="height: 8px; background-color: #f5f5f5; border-radius: 4px; overflow: hidden; margin-bottom: 8px;">
                                <div style="height: 100%; width: 35%; background-color: #ff6b6b; border-radius: 4px;"></div>
                            </div>
                            <div style="display: flex; justify-content: space-between; font-size: 12px; color: #999;">
                                <span>今日进度: 35%</span>
                                <span>目标: 1 篇/天</span>
                            </div>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title">推荐经书</h3>
                            <p style="font-size: 14px; color: #666; margin-bottom: 16px;">根据您的命理基本盘，我们为您推荐以下经书</p>
                            
                            <div style="display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px;">
                                <div style="min-width: 120px; text-align: center;">
                                    <div style="width: 120px; height: 160px; background-color: #ffe6e6; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-bottom: 8px;">
                                        <i class="fas fa-book-open" style="font-size: 36px; color: #ff6b6b;"></i>
                                    </div>
                                    <p style="font-size: 14px; font-weight: bold;">太上感应篇</p>
                                    <p style="font-size: 12px; color: #666;">提升福报</p>
                                </div>
                                <div style="min-width: 120px; text-align: center;">
                                    <div style="width: 120px; height: 160px; background-color: #e6f7ff; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-bottom: 8px;">
                                        <i class="fas fa-book-open" style="font-size: 36px; color: #1890ff;"></i>
                                    </div>
                                    <p style="font-size: 14px; font-weight: bold;">心经</p>
                                    <p style="font-size: 12px; color: #666;">化解烦恼</p>
                                </div>
                                <div style="min-width: 120px; text-align: center;">
                                    <div style="width: 120px; height: 160px; background-color: #f6ffed; border-radius: 8px; display: flex; justify-content: center; align-items: center; margin-bottom: 8px;">
                                        <i class="fas fa-book-open" style="font-size: 36px; color: #52c41a;"></i>
                                    </div>
                                    <p style="font-size: 14px; font-weight: bold;">道德经</p>
                                    <p style="font-size: 12px; color: #666;">增长智慧</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title" style="margin-bottom: 16px;">抄经区</h3>
                            
                            <div style="background-color: #f9f9f9; border-radius: 8px; padding: 16px; margin-bottom: 16px;">
                                <p style="font-size: 16px; line-height: 1.8; text-align: center; margin-bottom: 16px;">
                                    上善若水，水善利万物而不争，处众人之所恶，故几于道。居善地，心善渊，与善仁，言善信，政善治，事善能，动善时。夫唯不争，故无尤。
                                </p>
                                <div style="text-align: right; font-size: 14px; color: #999;">
                                    —— 《道德经》第八章
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 16px;">
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                                    <p style="font-size: 14px; color: #666;">请使用手指或触控笔在下方区域抄写经文</p>
                                    <button id="clear-canvas" style="background: none; border: 1px solid #ddd; border-radius: 4px; padding: 4px 8px; font-size: 12px; color: #666;">清除</button>
                                </div>
                                
                                <div style="position: relative; margin-bottom: 16px;">
                                    <!-- 手写区域背景 -->
                                    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;">
                                        <div style="width: 100%; height: 100%; background-image: linear-gradient(#eee 1px, transparent 1px), linear-gradient(90deg, #eee 1px, transparent 1px); background-size: 100% 40px, 40px 100%; border: 1px solid #ddd; border-radius: 8px; opacity: 0.5;"></div>
                                    </div>
                                    
                                    <!-- 手写画布 -->
                                    <canvas id="handwriting-canvas" width="100%" height="300" style="border: 1px solid #ddd; border-radius: 8px; background-color: #fff; position: relative; z-index: 2; touch-action: none;"></canvas>
                                </div>
                                
                                <div style="display: flex; gap: 10px; margin-bottom: 16px;">
                                    <div style="flex: 1;">
                                        <button id="prev-page" style="width: 100%; background-color: #f5f5f5; border: none; border-radius: 4px; padding: 8px; font-size: 14px; color: #666;">上一页</button>
                                    </div>
                                    <div style="flex: 1;">
                                        <button id="next-page" style="width: 100%; background-color: #f5f5f5; border: none; border-radius: 4px; padding: 8px; font-size: 14px; color: #666;">下一页</button>
                                    </div>
                                </div>
                                
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                                    <div style="display: flex; align-items: center;">
                                        <span style="font-size: 14px; color: #666; margin-right: 10px;">笔触粗细</span>
                                        <input type="range" id="brush-size" min="1" max="10" value="3" style="width: 80px;">
                                    </div>
                                    <div style="display: flex; align-items: center;">
                                        <span style="font-size: 14px; color: #666; margin-right: 10px;">墨色</span>
                                        <div style="display: flex; gap: 5px;">
                                            <div class="ink-color selected" data-color="#000" style="width: 20px; height: 20px; background-color: #000; border-radius: 50%; cursor: pointer; border: 2px solid #ff6b6b;"></div>
                                            <div class="ink-color" data-color="#333" style="width: 20px; height: 20px; background-color: #333; border-radius: 50%; cursor: pointer;"></div>
                                            <div class="ink-color" data-color="#666" style="width: 20px; height: 20px; background-color: #666; border-radius: 50%; cursor: pointer;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="display: flex; gap: 10px;">
                                <button class="btn" style="flex: 1; background-color: #f5f5f5; color: #333;">保存草稿</button>
                                <button class="btn" style="flex: 1;">提交抄经</button>
                            </div>
                        </div>
                        
                        <div class="card">
                            <h3 class="card-title">抄经记录</h3>
                            
                            <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
                                <div style="display: flex; align-items: center;">
                                    <div style="width: 40px; height: 40px; border-radius: 50%; background-color: #ffe6e6; display: flex; justify-content: center; align-items: center; margin-right: 12px;">
                                        <i class="fas fa-book" style="font-size: 16px; color: #ff6b6b;"></i>
                                    </div>
                                    <div>
                                        <p style="font-size: 14px; font-weight: bold;">太上感应篇</p>
                                        <p style="font-size: 12px; color: #999;">2023-06-10 09:15</p>
                                    </div>
                                </div>
                                <div style="color: #ff6b6b; font-weight: bold;">
                                    +5 福报
                                </div>
                            </div>
                            
                            <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
                                <div style="display: flex; align-items: center;">
                                    <div style="width: 40px; height: 40px; border-radius: 50%; background-color: #e6f7ff; display: flex; justify-content: center; align-items: center; margin-right: 12px;">
                                        <i class="fas fa-book" style="font-size: 16px; color: #1890ff;"></i>
                                    </div>
                                    <div>
                                        <p style="font-size: 14px; font-weight: bold;">心经</p>
                                        <p style="font-size: 12px; color: #999;">2023-06-09 20:30</p>
                                    </div>
                                </div>
                                <div style="color: #ff6b6b; font-weight: bold;">
                                    +3 福报
                                </div>
                            </div>
                            
                            <div style="display: flex; justify-content: space-between;">
                                <div style="display: flex; align-items: center;">
                                    <div style="width: 40px; height: 40px; border-radius: 50%; background-color: #f6ffed; display: flex; justify-content: center; align-items: center; margin-right: 12px;">
                                        <i class="fas fa-book" style="font-size: 16px; color: #52c41a;"></i>
                                    </div>
                                    <div>
                                        <p style="font-size: 14px; font-weight: bold;">道德经</p>
                                        <p style="font-size: 12px; color: #999;">2023-06-08 15:45</p>
                                    </div>
                                </div>
                                <div style="color: #ff6b6b; font-weight: bold;">
                                    +7 福报
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bottom-nav">
                        <div class="nav-item">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-chart-pie"></i>
                            <span>命盘</span>
                        </div>
                        <div class="nav-item active">
                            <i class="fas fa-book"></i>
                            <span>抄经</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-compass"></i>
                            <span>指引</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 每日修行指导页面 -->
            <div>
                <h2 class="prototype-title">5. 每日修行指导页面</h2>
                <div class="prototype">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-full"></i>
                        </span>
                    </div>
                    <div class="header">
                        <div class="back-button">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="header-title">修行指引</div>
                    </div>
                    <div class="content">
                        <div style="background-color: #ffe6e6; border-radius: 16px; padding: 20px; margin-bottom: 20px;">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                                <h3 style="font-size: 18px; color: #ff6b6b;">今日运势</h3>
                                <span style="font-size: 14px; color: #ff6b6b;">2023年6月11日</span>
                            </div>
                            <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; color: #ff6b6b; margin-bottom: 4px;">吉</div>
                                    <div style="font-size: 12px; color: #ff6b6b;">总运</div>
                                </div>
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; color: #ff6b6b; margin-bottom: 4px;">中</div>
                                    <div style="font-size: 12px; color: #ff6b6b;">财运</div>
                                </div>
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; color: #ff6b6b; margin-bottom: 4px;">吉</div>
                                    <div style="font-size: 12px; color: #ff6b6b;">事业</div>
                                </div>
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; color: #ff6b6b; margin-bottom: 4px;">吉</div>
                                    <div style="font-size: 12px; color: #ff6b6b;">健康</div>
                                </div>
                            </div>
                            <p style="font-size: 14px; color: #ff6b6b; line-height: 1.6;">
                                今日五行缺火，宜穿红色衣物，饮食宜温补，忌生冷食物。事业上有贵人相助，可大胆推进计划。
                            </p>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title">今日修行建议</h3>
                            
                            <div style="display: flex; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="width: 50px; height: 50px; border-radius: 50%; background-color: #ffe6e6; display: flex; justify-content: center; align-items: center; margin-right: 16px;">
                                    <i class="fas fa-hands-praying" style="font-size: 20px; color: #ff6b6b;"></i>
                                </div>
                                <div style="flex: 1;">
                                    <h4 style="font-size: 16px; margin-bottom: 4px;">晨起诵经</h4>
                                    <p style="font-size: 14px; color: #666;">清晨起床后，面向东方诵读《太上感应篇》前三章，可增强今日正能量。</p>
                                </div>
                                <div style="width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ddd; display: flex; justify-content: center; align-items: center;">
                                    <i class="fas fa-check" style="font-size: 12px; color: #ddd;"></i>
                                </div>
                            </div>
                            
                            <div style="display: flex; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="width: 50px; height: 50px; border-radius: 50%; background-color: #e6f7ff; display: flex; justify-content: center; align-items: center; margin-right: 16px;">
                                    <i class="fas fa-hand-holding-heart" style="font-size: 20px; color: #1890ff;"></i>
                                </div>
                                <div style="flex: 1;">
                                    <h4 style="font-size: 16px; margin-bottom: 4px;">行善积德</h4>
                                    <p style="font-size: 14px; color: #666;">今日宜行一善事，如扶老人过马路、给流浪动物喂食等，可增加福报。</p>
                                </div>
                                <div style="width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ddd; display: flex; justify-content: center; align-items: center;">
                                    <i class="fas fa-check" style="font-size: 12px; color: #ddd;"></i>
                                </div>
                            </div>
                            
                            <div style="display: flex; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="width: 50px; height: 50px; border-radius: 50%; background-color: #f6ffed; display: flex; justify-content: center; align-items: center; margin-right: 16px;">
                                    <i class="fas fa-seedling" style="font-size: 20px; color: #52c41a;"></i>
                                </div>
                                <div style="flex: 1;">
                                    <h4 style="font-size: 16px; margin-bottom: 4px;">静心冥想</h4>
                                    <p style="font-size: 14px; color: #666;">午休时间进行15分钟冥想，调整呼吸，放空思绪，可平衡五行能量。</p>
                                </div>
                                <div style="width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ff6b6b; background-color: #ff6b6b; display: flex; justify-content: center; align-items: center;">
                                    <i class="fas fa-check" style="font-size: 12px; color: white;"></i>
                                </div>
                            </div>
                            
                            <div style="display: flex; align-items: center;">
                                <div style="width: 50px; height: 50px; border-radius: 50%; background-color: #fff7e6; display: flex; justify-content: center; align-items: center; margin-right: 16px;">
                                    <i class="fas fa-moon" style="font-size: 20px; color: #fa8c16;"></i>
                                </div>
                                <div style="flex: 1;">
                                    <h4 style="font-size: 16px; margin-bottom: 4px;">睡前感恩</h4>
                                    <p style="font-size: 14px; color: #666;">睡前回顾今日所得，感恩生活中的美好，可增强正能量，促进好梦。</p>
                                </div>
                                <div style="width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ddd; display: flex; justify-content: center; align-items: center;">
                                    <i class="fas fa-check" style="font-size: 12px; color: #ddd;"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title">宜忌提示</h3>
                            
                            <div style="margin-bottom: 16px;">
                                <h4 style="font-size: 16px; margin-bottom: 8px; color: #52c41a;">
                                    <i class="fas fa-check-circle" style="margin-right: 8px;"></i>宜
                                </h4>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                    <span class="tag" style="background-color: #f6ffed; color: #52c41a;">谈生意</span>
                                    <span class="tag" style="background-color: #f6ffed; color: #52c41a;">见长辈</span>
                                    <span class="tag" style="background-color: #f6ffed; color: #52c41a;">收款</span>
                                    <span class="tag" style="background-color: #f6ffed; color: #52c41a;">学习</span>
                                    <span class="tag" style="background-color: #f6ffed; color: #52c41a;">锻炼身体</span>
                                </div>
                            </div>
                            
                            <div>
                                <h4 style="font-size: 16px; margin-bottom: 8px; color: #f5222d;">
                                    <i class="fas fa-times-circle" style="margin-right: 8px;"></i>忌
                                </h4>
                                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                                    <span class="tag" style="background-color: #fff1f0; color: #f5222d;">大额支出</span>
                                    <span class="tag" style="background-color: #fff1f0; color: #f5222d;">争执冲突</span>
                                    <span class="tag" style="background-color: #fff1f0; color: #f5222d;">熬夜</span>
                                    <span class="tag" style="background-color: #fff1f0; color: #f5222d;">搬家</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <h3 class="card-title">吉位方向</h3>
                            
                            <div style="position: relative; width: 240px; height: 240px; margin: 0 auto 20px; border-radius: 50%; background-color: #f5f5f5;">
                                <div style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); text-align: center;">
                                    <div style="font-size: 14px; font-weight: bold;">北</div>
                                    <div style="width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid #ff6b6b; margin: 4px auto;"></div>
                                </div>
                                <div style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center;">
                                    <div style="width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid #999; margin: 4px auto;"></div>
                                    <div style="font-size: 14px; font-weight: bold;">南</div>
                                </div>
                                <div style="position: absolute; left: 0; top: 50%; transform: translateY(-50%); text-align: center;">
                                    <div style="font-size: 14px; font-weight: bold;">西</div>
                                    <div style="width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 16px solid #999; margin: 4px auto;"></div>
                                </div>
                                <div style="position: absolute; right: 0; top: 50%; transform: translateY(-50%); text-align: center;">
                                    <div style="width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 16px solid #52c41a; margin: 4px auto;"></div>
                                    <div style="font-size: 14px; font-weight: bold;">东</div>
                                </div>
                                <div style="position: absolute; top: 20%; left: 20%; text-align: center;">
                                    <div style="font-size: 14px; font-weight: bold;">西北</div>
                                    <div style="width: 0; height: 0; border-right: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 16px solid #999; margin: 4px auto;"></div>
                                </div>
                                <div style="position: absolute; top: 20%; right: 20%; text-align: center;">
                                    <div style="font-size: 14px; font-weight: bold;">东北</div>
                                    <div style="width: 0; height: 0; border-left: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 16px solid #1890ff; margin: 4px auto;"></div>
                                </div>
                                <div style="position: absolute; bottom: 20%; left: 20%; text-align: center;">
                                    <div style="width: 0; height: 0; border-right: 8px solid transparent; border-top: 8px solid transparent; border-left: 16px solid #999; margin: 4px auto;"></div>
                                    <div style="font-size: 14px; font-weight: bold;">西南</div>
                                </div>
                                <div style="position: absolute; bottom: 20%; right: 20%; text-align: center;">
                                    <div style="width: 0; height: 0; border-left: 8px solid transparent; border-top: 8px solid transparent; border-right: 16px solid #999; margin: 4px auto;"></div>
                                    <div style="font-size: 14px; font-weight: bold;">东南</div>
                                </div>
                                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
                                    <i class="fas fa-user" style="font-size: 24px; color: #333;"></i>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 16px;">
                                <h4 style="font-size: 16px; margin-bottom: 8px; color: #52c41a;">
                                    <i class="fas fa-check-circle" style="margin-right: 8px;"></i>吉位
                                </h4>
                                <p style="font-size: 14px; color: #333; line-height: 1.6;">
                                    今日吉位在<span style="color: #ff6b6b; font-weight: bold;">北方</span>和<span style="color: #52c41a; font-weight: bold;">东方</span>，办公桌朝向这些方向有利于工作顺利，谈判成功。
                                </p>
                            </div>
                            
                            <div>
                                <h4 style="font-size: 16px; margin-bottom: 8px; color: #1890ff;">
                                    <i class="fas fa-info-circle" style="margin-right: 8px;"></i>开运建议
                                </h4>
                                <p style="font-size: 14px; color: #333; line-height: 1.6;">
                                    今日可在东北方向放置一杯清水，有助于增强智慧和决策力。外出时尽量选择北方或东方道路，有助于遇见贵人。
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bottom-nav">
                        <div class="nav-item">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-chart-pie"></i>
                            <span>命盘</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-book"></i>
                            <span>抄经</span>
                        </div>
                        <div class="nav-item active">
                            <i class="fas fa-compass"></i>
                            <span>指引</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 重要抉择咨询页面 -->
            <div>
                <h2 class="prototype-title">6. 重要抉择咨询页面</h2>
                <div class="prototype">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-full"></i>
                        </span>
                    </div>
                    <div class="header">
                        <div class="back-button">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="header-title">重要抉择咨询</div>
                    </div>
                    <div class="content">
                        <div style="padding: 10px 0 20px;">
                            <p style="text-align: center; margin-bottom: 20px; color: #666; font-size: 14px;">
                                在人生重要抉择时刻，我们将为您提供专业指引
                            </p>
                            
                            <div class="card" style="margin-bottom: 20px;">
                                <h3 class="card-title">选择咨询类型</h3>
                                
                                <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px;">
                                    <div style="width: calc(50% - 6px); background-color: #ffe6e6; border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;">
                                        <div style="width: 60px; height: 60px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; margin: 0 auto 12px;">
                                            <i class="fas fa-briefcase" style="font-size: 24px; color: #ff6b6b;"></i>
                                        </div>
                                        <h4 style="font-size: 16px; margin-bottom: 4px;">事业决策</h4>
                                        <p style="font-size: 12px; color: #666;">职业规划、跳槽、创业</p>
                                    </div>
                                    <div style="width: calc(50% - 6px); background-color: #e6f7ff; border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;">
                                        <div style="width: 60px; height: 60px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; margin: 0 auto 12px;">
                                            <i class="fas fa-heart" style="font-size: 24px; color: #1890ff;"></i>
                                        </div>
                                        <h4 style="font-size: 16px; margin-bottom: 4px;">感情抉择</h4>
                                        <p style="font-size: 12px; color: #666;">婚恋、分合、缘分</p>
                                    </div>
                                    <div style="width: calc(50% - 6px); background-color: #f6ffed; border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;">
                                        <div style="width: 60px; height: 60px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; margin: 0 auto 12px;">
                                            <i class="fas fa-coins" style="font-size: 24px; color: #52c41a;"></i>
                                        </div>
                                        <h4 style="font-size: 16px; margin-bottom: 4px;">财务决策</h4>
                                        <p style="font-size: 12px; color: #666;">投资、理财、购房</p>
                                    </div>
                                    <div style="width: calc(50% - 6px); background-color: #fff7e6; border-radius: 12px; padding: 16px; text-align: center; cursor: pointer;">
                                        <div style="width: 60px; height: 60px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; margin: 0 auto 12px;">
                                            <i class="fas fa-graduation-cap" style="font-size: 24px; color: #fa8c16;"></i>
                                        </div>
                                        <h4 style="font-size: 16px; margin-bottom: 4px;">学业选择</h4>
                                        <p style="font-size: 12px; color: #666;">专业选择、留学、考试</p>
                                    </div>
                                </div>
                                
                                <div style="display: flex; align-items: center; background-color: #f9f9f9; border-radius: 8px; padding: 12px; margin-bottom: 16px;">
                                    <i class="fas fa-search" style="font-size: 16px; color: #999; margin-right: 8px;"></i>
                                    <input type="text" placeholder="搜索其他咨询类型..." style="border: none; background: none; flex: 1; font-size: 14px;">
                                </div>
                            </div>
                            
                            <div class="card" style="margin-bottom: 20px; border: 2px solid #ff6b6b;">
                                <div style="display: flex; align-items: center; margin-bottom: 16px;">
                                    <div style="width: 50px; height: 50px; border-radius: 50%; background-color: #ffe6e6; display: flex; justify-content: center; align-items: center; margin-right: 16px;">
                                        <i class="fas fa-briefcase" style="font-size: 20px; color: #ff6b6b;"></i>
                                    </div>
                                    <div>
                                        <h3 style="font-size: 18px; margin-bottom: 4px;">事业决策咨询</h3>
                                        <p style="color: #666; font-size: 14px;">根据您的命理基本盘，为您提供事业发展指引</p>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">您目前面临的抉择是什么？</label>
                                    <textarea class="form-input" style="height: 100px; resize: none;" placeholder="例如：我目前在A公司工作，收到了B公司的offer，是否应该跳槽？"></textarea>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">您期望的结果是什么？</label>
                                    <textarea class="form-input" style="height: 80px; resize: none;" placeholder="例如：希望能找到更适合自己发展的平台，提升收入和职位"></textarea>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">您的决策时间范围</label>
                                    <select class="form-select">
                                        <option>需要立即决定（1-3天内）</option>
                                        <option selected>短期内需要决定（1-2周内）</option>
                                        <option>中期规划（1-3个月内）</option>
                                        <option>长期规划（半年以上）</option>
                                    </select>
                                </div>
                                
                                <div style="margin-top: 20px;">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
                                        <div style="font-size: 16px; font-weight: bold;">咨询服务费用</div>
                                        <div style="font-size: 16px; color: #ff6b6b; font-weight: bold;">¥198.00</div>
                                    </div>
                                    
                                    <div style="display: flex; align-items: center; margin-bottom: 20px;">
                                        <input type="checkbox" id="agree" checked style="margin-right: 8px;">
                                        <label for="agree" style="font-size: 14px; color: #666;">我已阅读并同意<a href="#" style="color: #ff6b6b;">《咨询服务协议》</a></label>
                                    </div>
                                    
                                    <button class="btn">提交咨询并支付</button>
                                </div>
                            </div>
                            
                            <div class="card">
                                <h3 class="card-title">历史咨询记录</h3>
                                
                                <div style="border-bottom: 1px solid #f5f5f5; padding-bottom: 16px; margin-bottom: 16px;">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                        <div style="font-size: 16px; font-weight: bold;">购房投资分析</div>
                                        <div style="font-size: 14px; color: #52c41a;">已完成</div>
                                    </div>
                                    <p style="font-size: 14px; color: #666; margin-bottom: 8px;">
                                        咨询内容：是否应该在当前城市购买第二套房产作为投资
                                    </p>
                                    <div style="display: flex; justify-content: space-between; font-size: 12px; color: #999;">
                                        <span>2023-05-20</span>
                                        <a href="#" style="color: #ff6b6b;">查看详情</a>
                                    </div>
                                </div>
                                
                                <div>
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                        <div style="font-size: 16px; font-weight: bold;">职业发展规划</div>
                                        <div style="font-size: 14px; color: #52c41a;">已完成</div>
                                    </div>
                                    <p style="font-size: 14px; color: #666; margin-bottom: 8px;">
                                        咨询内容：未来3年的职业发展方向和提升计划
                                    </p>
                                    <div style="display: flex; justify-content: space-between; font-size: 12px; color: #999;">
                                        <span>2023-03-15</span>
                                        <a href="#" style="color: #ff6b6b;">查看详情</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bottom-nav">
                        <div class="nav-item">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-chart-pie"></i>
                            <span>命盘</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-book"></i>
                            <span>抄经</span>
                        </div>
                        <div class="nav-item active">
                            <i class="fas fa-compass"></i>
                            <span>指引</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 会员中心/充值页面 -->
            <div>
                <h2 class="prototype-title">7. 会员中心/充值页面</h2>
                <div class="prototype">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-full"></i>
                        </span>
                    </div>
                    <div class="header">
                        <div class="back-button">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="header-title">会员中心</div>
                    </div>
                    <div class="content">
                        <div style="background: linear-gradient(135deg, #ff6b6b, #ff9f9f); border-radius: 16px; padding: 20px; margin-bottom: 20px; color: white;">
                            <div style="display: flex; align-items: center; margin-bottom: 20px;">
                                <div style="width: 60px; height: 60px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; margin-right: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                                    <i class="fas fa-crown" style="font-size: 24px; color: #ff6b6b;"></i>
                                </div>
                                <div>
                                    <h3 style="font-size: 18px; margin-bottom: 4px;">黄金会员</h3>
                                    <p style="font-size: 14px; opacity: 0.8;">有效期至：2023年12月31日</p>
                                </div>
                            </div>
                            
                            <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; margin-bottom: 4px;">128</div>
                                    <div style="font-size: 12px; opacity: 0.8;">福报值</div>
                                </div>
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; margin-bottom: 4px;">3</div>
                                    <div style="font-size: 12px; opacity: 0.8;">咨询次数</div>
                                </div>
                                <div style="text-align: center;">
                                    <div style="font-size: 24px; font-weight: bold; margin-bottom: 4px;">15</div>
                                    <div style="font-size: 12px; opacity: 0.8;">抄经天数</div>
                                </div>
                            </div>
                            
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <div style="font-size: 14px;">会员特权 5/8</div>
                                <a href="#" style="color: white; font-size: 14px; display: flex; align-items: center;">
                                    查看详情
                                    <i class="fas fa-chevron-right" style="font-size: 12px; margin-left: 4px;"></i>
                                </a>
                            </div>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title">会员套餐</h3>
                            
                            <div style="display: flex; overflow-x: auto; gap: 16px; padding-bottom: 8px; margin-bottom: 16px;">
                                <div style="min-width: 200px; border: 2px solid #ff6b6b; border-radius: 12px; padding: 16px; position: relative;">
                                    <div style="position: absolute; top: -10px; right: -10px; background-color: #ff6b6b; color: white; font-size: 12px; padding: 4px 8px; border-radius: 12px;">
                                        推荐
                                    </div>
                                    <h4 style="font-size: 18px; margin-bottom: 8px; color: #ff6b6b;">黄金会员</h4>
                                    <div style="font-size: 24px; font-weight: bold; margin-bottom: 16px;">
                                        ¥198<span style="font-size: 14px; color: #999; font-weight: normal;">/季度</span>
                                    </div>
                                    <ul style="list-style: none; padding: 0; margin-bottom: 16px;">
                                        <li style="display: flex; align-items: center; margin-bottom: 8px; font-size: 14px;">
                                            <i class="fas fa-check" style="color: #52c41a; margin-right: 8px;"></i>
                                            每日高级运势分析
                                        </li>
                                        <li style="display: flex; align-items: center; margin-bottom: 8px; font-size: 14px;">
                                            <i class="fas fa-check" style="color: #52c41a; margin-right: 8px;"></i>
                                            专属抄经推荐
                                        </li>
                                        <li style="display: flex; align-items: center; margin-bottom: 8px; font-size: 14px;">
                                            <i class="fas fa-check" style="color: #52c41a; margin-right: 8px;"></i>
                                            每月3次咨询服务
                                        </li>
                                        <li style="display: flex; align-items: center; font-size: 14px;">
                                            <i class="fas fa-check" style="color: #52c41a; margin-right: 8px;"></i>
                                            咨询服务8折优惠
                                        </li>
                                    </ul>
                                    <button class="btn" style="background-color: #ff6b6b;">立即续费</button>
                                </div>
                                
                                <div style="min-width: 200px; border: 1px solid #ddd; border-radius: 12px; padding: 16px;">
                                    <h4 style="font-size: 18px; margin-bottom: 8px;">钻石会员</h4>
                                    <div style="font-size: 24px; font-weight: bold; margin-bottom: 16px;">
                                        ¥498<span style="font-size: 14px; color: #999; font-weight: normal;">/年</span>
                                    </div>
                                    <ul style="list-style: none; padding: 0; margin-bottom: 16px;">
                                        <li style="display: flex; align-items: center; margin-bottom: 8px; font-size: 14px;">
                                            <i class="fas fa-check" style="color: #52c41a; margin-right: 8px;"></i>
                                            黄金会员所有特权
                                        </li>
                                        <li style="display: flex; align-items: center; margin-bottom: 8px; font-size: 14px;">
                                            <i class="fas fa-check" style="color: #52c41a; margin-right: 8px;"></i>
                                            每月5次咨询服务
                                        </li>
                                        <li style="display: flex; align-items: center; margin-bottom: 8px; font-size: 14px;">
                                            <i class="fas fa-check" style="color: #52c41a; margin-right: 8px;"></i>
                                            咨询服务6折优惠
                                        </li>
                                        <li style="display: flex; align-items: center; font-size: 14px;">
                                            <i class="fas fa-check" style="color: #52c41a; margin-right: 8px;"></i>
                                            专属客服一对一服务
                                        </li>
                                    </ul>
                                    <button class="btn" style="background-color: #f5f5f5; color: #333;">升级会员</button>
                                </div>
                            </div>
                            
                            <div style="text-align: center;">
                                <a href="#" style="color: #666; font-size: 14px; text-decoration: none;">查看更多会员套餐 ></a>
                            </div>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title">福报充值</h3>
                            
                            <div style="margin-bottom: 16px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                    <div style="font-size: 16px; font-weight: bold;">当前福报值</div>
                                    <div style="font-size: 16px; color: #ff6b6b; font-weight: bold;">128</div>
                                </div>
                                <div style="height: 8px; background-color: #f5f5f5; border-radius: 4px; overflow: hidden;">
                                    <div style="height: 100%; width: 60%; background-color: #ff6b6b; border-radius: 4px;"></div>
                                </div>
                                <div style="display: flex; justify-content: space-between; font-size: 12px; color: #999; margin-top: 4px;">
                                    <span>0</span>
                                    <span>200 (下一等级)</span>
                                </div>
                            </div>
                            
                            <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;">
                                <div style="width: calc(33.33% - 8px); border: 1px solid #ddd; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer;">
                                    <div style="font-size: 16px; font-weight: bold; margin-bottom: 4px;">50福报</div>
                                    <div style="font-size: 14px; color: #ff6b6b;">¥50</div>
                                </div>
                                <div style="width: calc(33.33% - 8px); border: 2px solid #ff6b6b; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer; background-color: #fff6f6;">
                                    <div style="font-size: 16px; font-weight: bold; margin-bottom: 4px;">100福报</div>
                                    <div style="font-size: 14px; color: #ff6b6b;">¥88 <span style="text-decoration: line-through; color: #999; font-size: 12px;">¥100</span></div>
                                </div>
                                <div style="width: calc(33.33% - 8px); border: 1px solid #ddd; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer;">
                                    <div style="font-size: 16px; font-weight: bold; margin-bottom: 4px;">200福报</div>
                                    <div style="font-size: 14px; color: #ff6b6b;">¥168</div>
                                </div>
                                <div style="width: calc(33.33% - 8px); border: 1px solid #ddd; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer;">
                                    <div style="font-size: 16px; font-weight: bold; margin-bottom: 4px;">500福报</div>
                                    <div style="font-size: 14px; color: #ff6b6b;">¥398</div>
                                </div>
                                <div style="width: calc(33.33% - 8px); border: 1px solid #ddd; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer;">
                                    <div style="font-size: 16px; font-weight: bold; margin-bottom: 4px;">1000福报</div>
                                    <div style="font-size: 14px; color: #ff6b6b;">¥698</div>
                                </div>
                                <div style="width: calc(33.33% - 8px); border: 1px solid #ddd; border-radius: 8px; padding: 12px; text-align: center; cursor: pointer;">
                                    <div style="font-size: 16px; font-weight: bold; margin-bottom: 4px;">自定义</div>
                                    <div style="font-size: 14px; color: #666;"><i class="fas fa-plus"></i></div>
                                </div>
                            </div>
                            
                            <button class="btn">确认充值</button>
                        </div>
                        
                        <div class="card">
                            <h3 class="card-title">福报使用记录</h3>
                            
                            <div style="border-bottom: 1px solid #f5f5f5; padding-bottom: 12px; margin-bottom: 12px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                    <div style="font-size: 14px;">购买《太上感应篇》高级解析</div>
                                    <div style="font-size: 14px; color: #f5222d;">-30福报</div>
                                </div>
                                <div style="font-size: 12px; color: #999;">2023-06-08 15:30</div>
                            </div>
                            
                            <div style="border-bottom: 1px solid #f5f5f5; padding-bottom: 12px; margin-bottom: 12px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                    <div style="font-size: 14px;">充值福报</div>
                                    <div style="font-size: 14px; color: #52c41a;">+100福报</div>
                                </div>
                                <div style="font-size: 12px; color: #999;">2023-06-05 10:15</div>
                            </div>
                            
                            <div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                    <div style="font-size: 14px;">事业咨询服务</div>
                                    <div style="font-size: 14px; color: #f5222d;">-50福报</div>
                                </div>
                                <div style="font-size: 12px; color: #999;">2023-06-01 14:20</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bottom-nav">
                        <div class="nav-item">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-chart-pie"></i>
                            <span>命盘</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-book"></i>
                            <span>抄经</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-compass"></i>
                            <span>指引</span>
                        </div>
                        <div class="nav-item active">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 个人设置页面 -->
            <div>
                <h2 class="prototype-title">8. 个人设置页面</h2>
                <div class="prototype">
                    <div class="status-bar">
                        <span>9:41</span>
                        <span>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-full"></i>
                        </span>
                    </div>
                    <div class="header">
                        <div class="back-button">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="header-title">个人中心</div>
                    </div>
                    <div class="content">
                        <div style="padding: 20px 0; text-align: center;">
                            <div style="width: 80px; height: 80px; border-radius: 50%; background-color: #ffe6e6; display: flex; justify-content: center; align-items: center; margin: 0 auto 16px; position: relative;">
                                <i class="fas fa-user" style="font-size: 36px; color: #ff6b6b;"></i>
                                <div style="position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                                    <i class="fas fa-camera" style="font-size: 12px; color: #666;"></i>
                                </div>
                            </div>
                            <h3 style="font-size: 18px; margin-bottom: 4px;">张先生</h3>
                            <p style="color: #666; font-size: 14px;">黄金会员</p>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title">账号信息</h3>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">手机号码</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <span style="margin-right: 8px;">138****6666</span>
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">修改密码</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">实名认证</div>
                                    <div style="display: flex; align-items: center;">
                                        <span style="margin-right: 8px; color: #52c41a; font-size: 14px;">已认证</span>
                                        <i class="fas fa-chevron-right" style="font-size: 12px; color: #999;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title">命理信息</h3>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">生辰八字</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <span style="margin-right: 8px;">癸亥年 癸卯月 甲辰日 辰时</span>
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">命理基本盘</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">运势报告</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <span style="margin-right: 8px; color: #ff6b6b; font-size: 14px;">5份</span>
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title">应用设置</h3>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">消息通知</div>
                                    <div style="display: flex; align-items: center;">
                                        <label class="switch" style="position: relative; display: inline-block; width: 40px; height: 20px;">
                                            <input type="checkbox" checked style="opacity: 0; width: 0; height: 0;">
                                            <span style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ff6b6b; border-radius: 20px; transition: .4s;">
                                                <span style="position: absolute; content: ''; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: .4s; transform: translateX(20px);"></span>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">深色模式</div>
                                    <div style="display: flex; align-items: center;">
                                        <label class="switch" style="position: relative; display: inline-block; width: 40px; height: 20px;">
                                            <input type="checkbox" style="opacity: 0; width: 0; height: 0;">
                                            <span style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; border-radius: 20px; transition: .4s;">
                                                <span style="position: absolute; content: ''; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: .4s;"></span>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">字体大小</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <span style="margin-right: 8px;">中</span>
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">清除缓存</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <span style="margin-right: 8px;">23.5MB</span>
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card" style="margin-bottom: 20px;">
                            <h3 class="card-title">关于我们</h3>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">当前版本</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <span>v1.0.0</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">用户协议</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #f5f5f5;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">隐私政策</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <div style="font-size: 16px;">联系客服</div>
                                    <div style="display: flex; align-items: center; color: #999;">
                                        <i class="fas fa-chevron-right" style="font-size: 12px;"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div style="margin: 30px 0; text-align: center;">
                            <button class="btn" style="max-width: 240px; background-color: #f5f5f5; color: #666;">退出登录</button>
                        </div>
                    </div>
                    
                    <div class="bottom-nav">
                        <div class="nav-item">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-chart-pie"></i>
                            <span>命盘</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-book"></i>
                            <span>抄经</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-compass"></i>
                            <span>指引</span>
                        </div>
                        <div class="nav-item active">
                            <i class="fas fa-user"></i>
                            <span>我的</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 初始化手写画布
    document.addEventListener('DOMContentLoaded', function() {
        const canvas = document.getElementById('handwriting-canvas');
        const ctx = canvas.getContext('2d');
        const clearButton = document.getElementById('clear-canvas');
        const brushSize = document.getElementById('brush-size');
        const inkColors = document.querySelectorAll('.ink-color');
        
        // 设置画布尺寸
        function resizeCanvas() {
            const container = canvas.parentElement;
            canvas.width = container.offsetWidth;
            canvas.height = 300;
        }
        
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        
        // 绘画变量
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let currentColor = '#000';
        
        // 绘画函数
        function draw(e) {
            if (!isDrawing) return;
            
            // 获取触摸或鼠标位置
            const x = e.type.includes('touch') ? 
                e.touches[0].clientX - canvas.getBoundingClientRect().left : 
                e.clientX - canvas.getBoundingClientRect().left;
            const y = e.type.includes('touch') ? 
                e.touches[0].clientY - canvas.getBoundingClientRect().top : 
                e.clientY - canvas.getBoundingClientRect().top;
            
            ctx.lineJoin = 'round';
            ctx.lineCap = 'round';
            ctx.lineWidth = brushSize.value;
            ctx.strokeStyle = currentColor;
            
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.stroke();
            
            lastX = x;
            lastY = y;
        }
        
        // 鼠标/触摸事件
        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            lastX = e.clientX - canvas.getBoundingClientRect().left;
            lastY = e.clientY - canvas.getBoundingClientRect().top;
        });
        
        canvas.addEventListener('touchstart', (e) => {
            isDrawing = true;
            lastX = e.touches[0].clientX - canvas.getBoundingClientRect().left;
            lastY = e.touches[0].clientY - canvas.getBoundingClientRect().top;
            e.preventDefault();
        });
        
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('touchmove', draw);
        
        canvas.addEventListener('mouseup', () => isDrawing = false);
        canvas.addEventListener('mouseout', () => isDrawing = false);
        canvas.addEventListener('touchend', () => isDrawing = false);
        
        // 清除画布
        clearButton.addEventListener('click', () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });
        
        // 更改墨色
        inkColors.forEach(color => {
            color.addEventListener('click', function() {
                // 移除所有选中状态
                inkColors.forEach(c => c.style.border = 'none');
                // 设置当前选中状态
                this.style.border = '2px solid #ff6b6b';
                currentColor = this.getAttribute('data-color');
            });
        });
    });
</script>
</html>
